<template>
<div>
    <div class="vs-table-box">
        <h3>顾客信息</h3>
        <el-form label-position="right" :rules="rules"   label-width="120px" :model="ruleForm">
            <el-form-item label="顾客姓名：" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="resource">
                <el-radio-group size="small" v-model="ruleForm.resource">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="电话：" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
        </el-form>
        <h3>订单信息</h3>
        <el-form label-position="right" :rules="rules"  label-width="120px" :model="ruleForm">
            <el-form-item label="订单编号：">
                20210701100000
            </el-form-item>
            <el-form-item label="订单项目：">
                <el-select  multiple v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单商品：">
                <el-select  multiple v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单金额：">
                254.00 元
            </el-form-item>
            <el-form-item label="订单商品金额：">
                54.00 元
            </el-form-item>
            <el-form-item label="优惠金额：">
               0.00元（优惠券编号：001）
            </el-form-item>
            <el-form-item label="实际支付金额：">
              308.00元
            </el-form-item>
            <el-form-item label="服务技师：" prop="resource">
                <el-select  clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单创建时间："> 2021-12-15 15：20：15 </el-form-item>
            <el-form-item label="订单完成时间："> 2021-12-15 16：20：15 </el-form-item>
            <el-form-item label="订单状态：" prop="resource">
                <el-select  clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开票状态：">
                未开票
            </el-form-item>
            <!-- <el-form-item label="备注：">
                拿一包瓜子
            </el-form-item> -->
        </el-form>
        <div >
            <el-button @click="utils.backPage()">取消</el-button>
            <el-button type="primary" >保存</el-button>
        </div>
    </div>

    <el-dialog
        title="更换技师"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原技师：">
                <el-select style="width:200px" clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更后技师：">
                <el-select style="width:200px" clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更原因">
                <el-input type="textarea" v-model="ruleForm.username"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取 消</el-button>
            <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="更换记录"
        :visible.sync="dialogVisible2"
        width="600px">
        <el-descriptions :column="1">
            <el-descriptions-item label="原技师">kooriookami</el-descriptions-item>
            <el-descriptions-item label="变更后技师">18100000000</el-descriptions-item>
            <el-descriptions-item label="变更原因">苏州市</el-descriptions-item>
            <el-descriptions-item label="变更时间：">2021-12-01  12:20:01</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</div>
</template>

<script>
export default {
    data(){
        return {
            dialogVisible:false,
            dialogVisible2:false,
            loading:false,
            tableData:[
                {}
            ],
            isBtn:false,
            ruleForm:{
                username:'',
                title:'',
                type:'',
                code:'',
                domains: [{
                    value: ''
                }],
            },
            rules: {
                username: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ],
                title: [ { required: true, message: '请输入企业名称', trigger: 'blur' }, ],
                type: [ { required: true, message: '请选择渠道', trigger: 'change' }, ],
                code:{ required: true, message: '请输入服务码', trigger: 'blur'}
            },
        }
    },
    methods:{
        removeDomain(item) {
            var index = this.ruleForm.domains.indexOf(item)
            if (index !== -1) {
            this.ruleForm.domains.splice(index, 1)
            }
        },
        handleClose(dom){
            dom&&dom();
            this.dialogVisible = false;
        },
        setAd(){

        }
    }
}
</script>

<style leng="scss" scoped>
.vs-table-box{
    /* width: 1000px; */
    margin: 30px auto;
    padding: 16px 72px;
}
.el-input,.el-select{
    width: 260px;
    margin-right: 10px;
}
</style>